<template>
  <div class="container">
    <div
      v-if="!noData"
      v-loading="listLoading"
      class="lists"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        class="list clearfix pt15 pb15"
      >
        <div>
          <div class="content">
            <!-- 头像 -->
            <div class="head-portrait">
              <span v-if="item.readFlag == 0" class="sign" />
              <i class="el-icon-message-solid" />
            </div>
            <!-- / 头像 -->
            <div class="info mt5">
              <!-- 时间 -->

              <span
                v-if="item.newsType == 0"
                class="f16 text-666 fb"
              >新简历</span>
              <span
                v-else-if="item.newsType == 4"
                class="f16 text-666 fb"
              >面试邀请被接受</span>
              <span
                v-else-if="item.newsType == 6"
                class="f16 text-666 fb"
              >入职邀请被接受</span>
              <span
                v-else-if="item.newsType == 7"
                class="f16 text-666 fb"
              >入职邀请被拒绝</span>
              <span
                v-else-if="item.newsType == 3"
                class="f16 text-666 fb"
              >面试邀请被拒绝</span>
              <span
                v-else-if="item.newsType == 1"
                class="f16 text-666 fb"
              >面试即将开始提醒</span>
              <span
                v-else
                class="f16 text-666 fb"
              >{{ item.newsType_dictText }}</span>
              <!-- / 时间 -->
              <!-- 求职者 -->
              <div class="job-wanted">
                <div class="f14 text-333 mt10 news-content">
                  <span>{{ item.newsContent }}</span>

                  <el-button
                    v-if="item.newsType == 0"
                    type="text"
                    size="mini"
                    class="ml15 p0"
                    @click="openDetails(item)"
                  >详情 <i class="el-icon-arrow-right" /></el-button>
                  <el-popover
                    v-else-if="item.newsType == 4 || item.newsType == 3"
                    placement="right"
                    width="500"
                    trigger="click"
                    @show="settingRead(item)"
                  >
                    <div class="f14 fb">
                      <span>{{ item.enContacts ? item.enContacts.userName : '' }}</span>
                      <span>为候选人安排了面试</span>
                      <span class="ml10">{{ item.interviewHistory ? $moment(item.interviewHistory.createTime).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                    </div>
                    <div class="mt10 ml20">
                      <div class="">
                        <span>面试时间：</span>
                        <span>{{ item.interviewHistory ? $moment(item.interviewHistory.time).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>面试形式：</span>
                        <span>{{ item.interviewHistory ? (item.interviewHistory.type == 0?'现场面试':'视频面试') : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>联&#8194;系&#8194;人：</span>
                        <span>{{ item.enContacts ? item.enContacts.userName : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>面试地址：</span>
                        <span>{{ item.interviewHistory ? item.interviewHistory.location : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>备注信息：</span>
                        <span>{{ item.interviewHistory ? item.interviewHistory.remark : '' }}</span>
                      </div>
                    </div>
                    <div class="f14 fb mt15">
                      <span>候选人{{ item.interviewHistory&&item.interviewHistory.outLineState == 1 ? '接受' : '拒绝' }}了面试邀请</span>
                      <span class="ml10">{{ item.interviewHistory ? $moment(item.interviewHistory.doTime).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                    </div>
                    <div class="mt10 ml20">
                      <div class="">
                        <span>候选人：</span>
                        <span>{{ item.piInfo ? item.piInfo.name : '' }}</span>
                      </div>
                      <!-- <div class="mt5">
                        <span>{{item.interviewHistory&&item.interviewHistory.outLineState == 1 ? '接受' : '拒绝'}}面试说明：</span>
                        <span>{{item.interviewHistory ? item.interviewHistory.des : ''}}</span>
                      </div> -->
                    </div>
                    <el-button

                      slot="reference"
                      type="text"
                      size="mini"
                      class="ml15 p0"
                    >详情 <i class="el-icon-arrow-right" /></el-button>
                  </el-popover>

                  <el-popover
                    v-else-if="item.newsType == 6 || item.newsType == 7"
                    placement="right"
                    width="500"
                    trigger="click"
                    @show="settingRead(item)"
                  >
                    <div class="f14 fb">
                      <span>{{ item.enContacts ? item.enContacts.userName : '' }}</span>
                      <span>为候选人发送了入职邀请</span>
                      <span class="ml10">{{ item.entryHistory ? $moment(item.entryHistory.createTime).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                    </div>
                    <div class="mt10 ml20">
                      <div class="">
                        <span>入职时间：</span>
                        <span>{{ item.entryHistory ? $moment(item.entryHistory.time).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>联&#8194;系&#8194;人：</span>
                        <span>{{ item.enContacts ? item.enContacts.userName : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>入职地址：</span>
                        <span>{{ item.enContacts ? item.enContacts.interviewAddr : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>备注信息：</span>
                        <span>{{ item.entryHistory ? item.entryHistory.remark : '' }}</span>
                      </div>
                    </div>
                    <div class="f14 fb mt15">
                      <span>候选人{{ item.entryHistory.acceptFlag == 1 ? '接受' : '拒绝' }}了入职邀请</span>
                      <span class="ml10">{{ item.entryHistory ? $moment(item.entryHistory.doTime).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                    </div>
                    <div class="mt10 ml20">
                      <div class="">
                        <span>候选人：</span>
                        <span>{{ item.piInfo ? item.piInfo.name : '' }}</span>
                      </div>
                      <!-- <div class="mt5">
                        <span>{{item.entryHistory.acceptFlag == 0 ? '接受' : '拒绝'}}录用说明：</span>
                        <span>{{item.entryHistory ? item.entryHistory.des : ''}}</span>
                      </div> -->
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="mini"
                      class="ml15 p0"
                    >详情 <i class="el-icon-arrow-right" /></el-button>
                  </el-popover>

                  <el-popover
                    v-else-if="item.newsType == 1"
                    placement="right"
                    width="500"
                    trigger="click"
                    @show="settingRead(item)"
                  >
                    <div class="f14 fb">
                      <span>面试即将开始提醒</span>
                    </div>
                    <div class="mt10 ml20">
                      <div class="">
                        <span>面试时间：</span>
                        <span>{{ item.entryHistory ? $moment(item.entryHistory.time).format("yyyy-MM-DD HH:mm:ss") : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>候选人：</span>
                        <span>{{ item.piInfo ? item.piInfo.name : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>面试岗位：</span>
                        <span>{{ item.job ? item.job.jobName : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>面试形式：</span>
                        <span>{{ item.interviewHistory ? (item.interviewHistory.type == 0?'现场面试':'视频面试') : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>联&#8194;系&#8194;人：</span>
                        <span>{{ item.enContacts ? item.enContacts.userName : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>面试地址：</span>
                        <span>{{ item.interviewHistory ? item.interviewHistory.location : '' }}</span>
                      </div>
                      <div class="mt5">
                        <span>备注信息：</span>
                        <span>{{ item.interviewHistory ? item.interviewHistory.remark : '' }}</span>
                      </div>
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="mini"
                      class="ml15 p0"
                    >详情 <i class="el-icon-arrow-right" /></el-button>
                  </el-popover>
                  <el-button
                    v-else
                    type="text"
                    size="mini"
                    class="ml15 p0"
                    @click="settingRead(item)"
                  >已读<i class="el-icon-arrow-right" /></el-button>
                </div>
                <div class="time f14 text-999">
                  {{ item.createTime }}
                  <div
                    class="delete text-999 f14 link-type"
                    @click="delItem(item.id)"
                  >
                    <span class="el-icon-delete mr5" />
                    <span>删除</span>
                  </div>
                </div>
                <!-- 详情 -->
                <!-- / 详情 -->
                <!-- 删除 -->

                <!-- / 删除 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <no-data v-if="noData" class="mb30" />
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <pdf-dialog ref="pdfDialog" @transportShow="transportShow" />
    <forward-drawer ref="transportDrawer" @refresh="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import pdfDialog from '@/components/PdfDialog'
import forwardDrawer from '@/components/CurriculumVitaeStateDrawer/forwardDrawer.vue'
import noData from '@/components/noData'
import { enMessageList, enMessageDelete, enMessageEdit, getOne } from '@/api/article'
import { faceList } from '@/api/index'
export default {
  name: '',
  components: { Pagination, noData, pdfDialog, forwardDrawer },
  props: {},
  data() {
    return {
      noData: false,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      list: []
    }
  },
  computed: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    transportShow(e) {
      this.$refs.transportDrawer.show(e.name, e.jobName, e.reId)
    },
    // 设置已读
    settingRead(item) {
      enMessageEdit({
        id: item.id,
        readFlag: 1
      }).then(res => {
        item.readFlag = 1
        this.$emit('alreadyRead')
      })
    },
    // 打开简历详情
    openDetails(item) {
      if (item.objId) {
        getOne({
          id: item.objId
        }).then(res => {
          this.settingRead(item)
          const data = res.result
          data.jobInfo = data.opJob
          data.deliveryInfo = data
          data.reState = data.state
          data.lanType = data.resumeVO.lanType// 投递的简历语言类型  0 中文 1英文
          data.type = data.resumeVO.type// 投递的简历文件类型 0 在线 1附件
          data.dataId = data.id // 投递记录id
          this.$refs.pdfDialog.show(data, false, true, data.opJob.jobName)
        })
      }
    },
    getList() {
      this.listLoading = true
      enMessageList(this.listQuery).then((response) => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
        if (this.list.length < 1) {
          this.noData = true
        }else{
           this.noData = false
        }
      })
    },
    delItem(id) {
      this.$confirm('确定要删除此消息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          enMessageDelete({ id: id }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  border-bottom: 1px solid #f3f3f3;
}
.content{
      position: relative;
}
.head-portrait {
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #DCB456;
  border-radius: 50%;
  .sign{
    position:absolute;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #E54437;
    border-radius: 50%;
  }
}
.info{
   margin-left: 60px;
   margin-right: 100px;
}
.job-wanted {

  width: 100%;
  line-height: 36px;
  .news-content {
    display: block;
    line-height: 20px;
  }

.delete{
 position: absolute;
    right: 20px;
    bottom: 20px;
}
}
::v-deep .el-badge__content.is-fixed {
  top: 10px;
}
.reply-content {
  background: #f2f2f2;
  border-radius: 5px;
}
</style>
